<template>
  <el-dialog
    class="label-manage-dialog"
    append-to-body
    title="标签设置"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    :visible="visible"
    :width="$setRem(800)"
    :before-close="handleClose">
    <div class="content">
      <el-table
        class="table-content"
        v-loading="tableLoading"
        element-loading-custom-class="custom-load"
        :data="tableData"
        style="width: 100%">
        <el-table-column prop="content" label="标签内容"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column prop="labelType" label="标签类型">
          <template slot-scope="scope">
            {{ scope.row.labelType === 1 ? '质量' : '' }}
            {{ scope.row.labelType === 2 ? '安全' : '' }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <span class="btn" @click="hanldeDelete(scope.row)">删除</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="total > 10"
        :page-size="pageSize"
        :current-page="pageNo"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      pageSize: 10,
      pageNo: 1,
      total: 0,
      tableLoading: false,
      tableData: []
    };
  },
  watch: {
    visible(val) {
      if (val) {
        this.getTableData();
        return;
      }
      this.tableLoading = false;
    }
  },
  methods: {
    async getTableData() {
      this.tableLoading = true;
      const { success, data: { data }} = await this.$Model.getBimLabel({
        pageSize: this.pageSize,
        pageNum: this.pageNum
      });
      this.tableLoading = false;
      if (success && data) {
        const { list, total } = data;
        this.tableData = list || [];
        this.total = total || 0;
      }
    },
    // 清除参数
    clear() {
      this.pageNo = 1;
      this.pageSize = 10;
      this.total = 0;
      this.tableLoading = false;
      this.tableData = [];
    },
    /**
     * pageSize 改变时会触发
     * @param pageSize 每页条数
     */
    handleSizeChange(pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.getTableData();
    },
    /**
     * currentPage 改变时会触发
     * @param pageNo 当前页
     */
    handleCurrentChange(pageNo) {
      this.pageNo = pageNo;
      this.getTableData();
    },
    hanldeDelete(row) {
      this.$confirm('此操作将删除该条数据, 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        const { success } = await this.$Model.deleteBimLabel({
          ids: row.id
        });
        if (success) {
          this.$emit('change', true);
          this.$message.success('删除成功');
          this.clear();
          this.getTableData();
        }
      });
    },
    handleClose() {
      this.$emit('cancel', false);
    }
  }
};
</script>

<style lang="scss" scoped>
  @import '../../../assets/styles/dialog';
  .label-manage-dialog {
    .table-content {
      /deep/ .el-table__body-wrapper {
        min-height: 300px;
        max-height: 600px;
        overflow-y: auto;
      }
      .btn {
        cursor: pointer;
        color: $mainColor;
      }
    }
  }
</style>
